<template>
  <el-input
    :disabled="Boolean(option.noSelect)"
    v-if="option.type == 1"
    v-model="option.value"
  />
  <el-select
    v-if="option.type == 2 || option.type == 3"
    :multiple="option.type == 3"
    placeholder="请选择"
    v-model="option.value"
  >
    <el-option
      v-for="(val, key) of option.items"
      :key="key"
      :label="val[`${option.keyName}`]"
      :value="val._id"
    >
    </el-option>
  </el-select>
  <el-upload
    v-if="option.type == 4"
    class="uploader"
    :action="`${host}/upload`"
    accept="image/*"
    :headers="setAuthHeaders()"
    :show-file-list="false"
    :on-success="afterUpload"
  >
    <img v-if="option.value" :src="`${host}${option.value}`" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs } from "vue";
import { ElInput, ElSelect, ElOption, ElUpload } from "element-plus";

export default defineComponent({
  name: "EditItem",
  props: {
    option: {
      type: Object,
      required: true,
    },
  },
  components: {
    ElInput,
    ElSelect,
    ElOption,
    ElUpload,
  },
  setup(props) {
    const { option } = toRefs(props);
    const host = ref(import.meta.env.VITE_SEREVER_HOST as string);

    function setAuthHeaders() {
      return {
        Authorization: "Bearer " + (localStorage.token || ""),
      };
    }

    function afterUpload(file: any) {
      option.value.value = `/uploads/${file.filename}`;
    }

    return { option, setAuthHeaders, host, afterUpload };
  },
});
</script>

<style></style>
